<template>
  <div class="login-page">
    <div class="ct">
      <div class="r-wrap">
        <!-- <SvgIcon class="logo" icon="logo" /> -->
        <img class="logo" src="@/assets/images/public/logo.png" />
        <div class="login-box">
          <div class="name">{{ systemName }}</div>
          <div class="form-box">
            <el-form ref="formEle" :rules="rules" :model="loginForm">
              <el-form-item prop="account">
                <el-input v-model="loginForm.account" placeholder="请输入账号">
                  <template #prefix><SvgIcon icon="login-user" :size="16"></SvgIcon></template>
                </el-input>
              </el-form-item>
              <el-form-item prop="password">
                <el-input v-model="loginForm.password" type="password" placeholder="请输入密码" show-password @keyup.enter.native="handleLogin">
                  <template #prefix><SvgIcon icon="login-psw" :size="16"></SvgIcon></template>
                </el-input>
              </el-form-item>
            </el-form>
            <el-button type="primary" size="large" class="login-btn" :loading="loading" @click="handleLogin">登 录</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, type Ref, watch, computed } from "vue";
import { useRoute } from "vue-router";
import { ElForm } from "element-plus";
import { useAuthStore } from "@/store/modules/auth";
import router from "@/router";

const route = useRoute();

const authStore = useAuthStore();
const formEle: Ref<InstanceType<typeof ElForm> | null> = ref(null);

const loginForm = ref({
  password: "",
  account: ""
});
const rules = {
  password: [{ required: true, message: "请输入密码", trigger: "blur" }],
  account: [{ required: true, message: "请输入账号", trigger: "blur" }]
};
const loading = ref(false);
const redirect = ref("");
const systemName = computed(() => authStore.systemName);

watch(
  route,
  (route) => {
    const query = route.query;
    if (query.redirect && query.redirect !== "/login") {
      redirect.value = String(query.redirect);
    }
  },
  { immediate: true }
);
/**
 * @description: 登录
 * @param {*}
 * @return {*}
 */
const handleLogin = () => {
  formEle.value?.validate(async (valid) => {
    if (valid) {
      try {
        loading.value = true;
        await authStore.loginFn(loginForm.value);
        loading.value = false;
        router.push("/");
      } catch (error) {
        loading.value = false;
      }
    }
  });
};
</script>

<style lang="scss" scoped>
.login-page {
  width: 100%;
  height: 100%;
  background: url("@images/login-bck.webp") no-repeat;
  background-size: cover;
  .ct {
    // background: #fff;
    display: flex;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    .r-wrap {
      text-align: center;

      .logo {
        height: 54px;
        margin-bottom: 30px;
      }
      .login-box {
        background: #fff;
        box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.1);
        border-radius: 10px;
        padding: 40px 40px 50px;
        width: 400px;
        box-sizing: border-box;

        .name {
          font-size: 24px;
          font-weight: bold;
          color: #333;
          margin-bottom: 40px;
        }
        :deep(.form-box) {
          .el-form {
            .el-form-item {
              margin-bottom: 20px;
              &:last-child {
                margin-bottom: 0;
              }
              .el-input {
                --el-input-height: 46px;
              }
            }
          }
          .login-btn {
            --el-button-size: 46px;
            margin-top: 60px;
            width: 100%;
          }
        }
      }
    }
  }
  .version-tips {
    position: absolute;
    left: 50%;
    bottom: 50px;
    font-size: 14px;
    color: #999fae;
    line-height: 20px;
    font-weight: 600;
    letter-spacing: 1px;
    transform: translateX(-50%);
  }
}
</style>
